<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border max-height="400">
      <el-table-column fixed align="center" prop="wxopenid" label="wxId" width="250" />
      <el-table-column align="center" label="进度" width="80">
        <template #default="scope">
          {{ scope.row.index }} <span>/ 20</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="String(index + 1)" v-for="(item, index) in 20" :key="index" prop="urls"
        width="120">
        <template #default="scope">
          <el-tooltip v-if="scope.row.urls[index] != ''" class="box-item" effect="dark" :content="scope.row.urls[index]"
            placement="bottom">
            <el-input v-model="scope.row.urls[index]" @blur="validateURL" maxlength="255" type="text"
              @click.stop="openDialog(scope.row.urls[index], index, scope.row)" />
          </el-tooltip>
          <el-input v-else v-model="scope.row.urls[index]" @blur="validateURL" maxlength="255" type="text"
            @click.stop="openDialog(scope.row.urls[index], index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submit">submit</el-button>

    <el-dialog v-model="centerDialogVisible" title="更改链接" width="500" align-center>
      <el-input v-model="dialogUrl" @blur="validateURL" maxlength="255" type="text" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUrl">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getAllUsersId, updateUsersId } from "@/api";

const url = ref('');
const error = ref('');
const dialogUrl = ref("");
const dialogID = ref("");
const dialogIndex = ref("");
const centerDialogVisible = ref(false)

onMounted(() => {
  getAll();
});

const openDialog = (url, index, row) => {
  centerDialogVisible.value = true;
  dialogUrl.value = url;
  dialogIndex.value = index;
  dialogID.value = row.wxopenid;

};
const submitUrl = () => {
  tableData.value = tableData.value.map((item) => {
    if (item.wxopenid == dialogID.value) {
      item.urls[dialogIndex.value] = dialogUrl.value;
    }
    centerDialogVisible.value = false;
    return item;
  });
};

const validateURL = () => {
  const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
  if (!urlPattern.test(url.value)) {
    error.value = '请输入有效的URL';
  }
  else {
    error.value = '123';
  }
};
const submit = async () => {
  // validateURL();
  let data = ref([])
  tableData.value.map((item) => {
    data.value.push({
      wxopenid: item.wxopenid,
      urls: item.urls
    });
    return item
  });
  // data.value.forEach(async (item) => {
  //   await updateUsersId(item);
  // });
  const res = await updateUsersId(data.value);
  if (res.success) {
    ElMessage.success('提交成功');
  }
  else {
    console.log('fail');
  }


};
const tableData = ref([]);
const getAll = async () => {
  const res = await getAllUsersId();
  if (res.success) {
    tableData.value = res.data
  }
};
</script>
